<template>
  <div class="header_container">
    <el-row>
      <el-col :span="22">
        <p>物联网智慧实训平台后台管理</p>
      </el-col>
      <el-col :span="2">
        <el-dropdown @command="handleCommand" style="margin-top: 10px">
          <img src="../assets/stu/pic_title_user.png">
          {{user}}
          <el-dropdown-menu slot="dropdown">
            <!--<el-dropdown-item command="home">首页</el-dropdown-item>-->
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {getClientUser, clientLogout} from '@/api/api'
  export default {
    data () {
      return {
        user: '123'
      }
    },
    created () {
      this.initData()
    },
    methods: {
      logout () {
        clientLogout({username: this.user}).then(res => {
          this.$router.push({path: '/'})
        })
      },
      initData () {
        getClientUser().then(res => {
          if (res.status === 201) {
//            this.$router.push({path: '/'})
          } else {
            this.user = res.data.name
          }
        })
      },
      handleCommand (command) {
        switch (command) {
          case 'logout':
            this.logout()
            break
          case 'home':
            this.logout()
            break
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .header_container{
    background-color: #3c8dbc;
    height: 60px;
    padding-left: 20px;
    p {
      text-align: center;
      color: white;
      font-size: 30px;
      margin-top: 8px;
    }
  }
</style>
